<template>
  <div id="login" v-if="loginShow">
    <div class="login-box" id="son">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="0">账号登录</el-menu-item>
        <!--<el-menu-item index="1">扫码登录</el-menu-item>-->
        <el-menu-item index="2">快速注册</el-menu-item>
        <!--<el-menu-item index="3">扫码注册</el-menu-item>-->
      </el-menu>
      <!--报错提示-->
      <p style="position: absolute;text-align: center;width: 100%;z-index: 999;color: red;font-weight: 700" v-if="messages!=''">{{messages}}</p>
      <div class="loginBox">
        <!--账号登录-->
        <div v-if="activeIndex==0" style="width: 80%;margin: 0 auto;padding-top:10px">
          <el-menu :default-active="accountIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect1">
            <el-menu-item index="0">账号登录</el-menu-item>
            <el-menu-item index="1">手机号登录</el-menu-item>
          </el-menu>
          <div v-if="accountIndex == 0">
            <!--<el-form-item label="账号(昵称)" prop="userName">-->
            <el-input prefix-icon="el-icon-user-solid" v-model="form.userName" placeholder="请输入账号(昵称)" style="width: 100%"></el-input>
            <!--</el-form-item>-->
            <br>
            <el-input prefix-icon="el-icon-question" type="password" v-model="form.password" show-password placeholder="请输入密码" style="width: 100%"></el-input>
            <br>
            <el-button type="primary" @click="onSubmit" style="width: 100%;margin-bottom: 20px;">确定</el-button>
          </div>
          <div v-if="accountIndex == 1" style="position: relative">
            <el-input prefix-icon="el-icon-phone" v-model="form.tel" maxlength="11" placeholder="请输入手机号" style="width: 100%"></el-input>
            <el-button type="primary" v-if="!codeSend" @click="getCode" mini style="position: absolute;right: 0;top:0;">获取验证码</el-button>
            <el-button type="primary" v-if="codeSend" mini style="position: absolute;right: 0;top:0;">已发送({{time}}s)</el-button>
            <br>
            <el-input prefix-icon="el-icon-warning" v-model="form.code" placeholder="请输入验证码" style="width: 100%"></el-input>
            <br>
            <el-button type="primary" @click="onSubmit1" style="width: 100%;margin-bottom: 20px;">确定</el-button>
          </div>
        </div>
        <!--扫码登录-->
        <div v-else-if="activeIndex==1" style="width: 250px;margin: 0 auto">
          <div style="font-size: 14px;text-align: center">请使用“我的南京”APP或微信进行扫码</div>
          <img src="@/assets/images/home/erweima.png" alt="" style="width: 250px;height: 250px">
        </div>
        <!--快速注册-->
        <div v-else-if="activeIndex==2" style="width: 80%;margin: 0 auto;">
          <el-menu :default-active="registerIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect2">
            <el-menu-item index="0">企业员工注册</el-menu-item>
            <el-menu-item index="1">手机号注册</el-menu-item>
          </el-menu>
          <div v-if="registerIndex == 0">
            <el-select v-model="form.qiyeName" filterable @change="selectChanged" style="width: 100%;margin-bottom: 5px" placeholder="请选择" :popper-append-to-body="false"  popper-class="select-popper">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.companyName"
                :value="item.id">
              </el-option>
            </el-select>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.nickname" placeholder="请输入您的姓名" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.userName" placeholder="请输入您的昵称(账号)" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.job" placeholder="请输入您的职位" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.tel" maxlength="11" placeholder="请输入您的手机号" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.idCard" placeholder="请输入您的身份证号码" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.wechat" placeholder="请输入您的微信号" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-question" type="password" v-model="form.password" show-password placeholder="请输入密码" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-question" type="password" v-model="form.passAgain" show-password placeholder="请再次输入密码" style="width: 100%"></el-input>
            <!--<div style="margin-top: -28px;color: red;font-size: 14px;margin-bottom: 25px;">提示：密码不得小于8位数，必须同时包含数字、符号、英文</div>-->
            <el-button type="primary" @click="onSubmit2" style="width: 100%;margin-bottom: 20px;">确定</el-button>
          </div>
          <div v-if="registerIndex == 1" style="position: relative">
            <el-input prefix-icon="el-icon-phone" v-model="form.tel" maxlength="11" placeholder="请输入手机号" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-button type="primary" @click="getCode" v-if="!codeSend" mini style="position: absolute;right: 0;top:0;">获取验证码</el-button>
            <el-button type="primary" v-if="codeSend" mini style="position: absolute;right: 0;top:0;">已发送({{time}}s)</el-button>
            <el-input prefix-icon="el-icon-warning" v-model="form.code" placeholder="请输入验证码" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.userName" placeholder="请输入您的昵称(账号)" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.nickname" placeholder="请输入您的姓名" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.idCard" placeholder="请输入您的身份证号码" style="width: 100%;margin-bottom: 5px"></el-input>
            <el-input prefix-icon="el-icon-user-solid" v-model="form.wechat" placeholder="请输入您的微信号" style="width: 100%;"></el-input>
            <el-button type="primary" @click="onSubmit3" style="width: 100%;margin-bottom: 20px;">确定</el-button>
          </div>
        </div>
        <!--扫码注册-->
        <div v-else style="width: 250px;margin: 0 auto">
          <div style="font-size: 14px;text-align: center">请使用“我的南京”APP或微信进行扫码</div>
          <img src="@/assets/images/home/erweima.png" alt="" style="width: 250px;height: 250px">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { setToken } from '@/request/auth'
  import {accountLogin,sendcode,register,registerByTel,telLogin,verify,queryUser,queryComsList} from '@/request/api'
  export default {
    name: 'login',
    props: {
      loginShow: ''
    },
    data () {
      return {
        activeIndex: '0',
        form: {
          password: '',
          passAgain: '',
          job: '',
          qiyeName: '',
          code: '',
          nickname:'',
          userName: '',
          idCard: '',
          tel: '',
          companyId: '',
          wechat: '',
        },
        hhh:'',
        options: [],
        accountIndex: '0',//账号登录或手机号登录
        registerIndex: '0',//快速注册：手机号注册，企业关键字注册
        time: 60,//验证码倒计时
        timeController: null,
        codeSend: false,
        messages: '',
        rules: { // 表单验证规则
          userName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        }
      }
    },
    created() {
        this.getqueryComsList()
    },
    methods: {
//        企业查询
      getqueryComsList() {
        this.$store.state.headersToken = false
        queryComsList().then(res=> {
          if(res.code==200) {
            this.$store.state.headersToken = true
              this.options = res.data
            this.form.qiyeName =  this.options[0].companyName
            this.form.companyId =  this.options[0].id
            localStorage.setItem('comsList',JSON.stringify(res.data))
          }else {
            this.$store.state.headersToken = true
          }
        }).catch(() => {
          this.$store.state.headersToken = true
        })
      },
//      切换企业change
      selectChanged(value) {
        this.form.companyId = value
      },
//        切换tab
      handleSelect(key, keyPath) {
//        console.log(key, keyPath);
        this.activeIndex = key
      },
      handleSelect1(key, keyPath) {
        this.accountIndex = key
      },
      handleSelect2(key, keyPath) {
        this.registerIndex = key
      },
//      账号密码登录
      onSubmit() {
        this.$store.state.headersToken = false
          if(this.form.userName=='') {
              this.messages = '请输入账号'
            setTimeout(e=> {
              this.messages = ''
            },3000)
          }else if(this.form.password==''){
            this.messages = '请输入密码'
            setTimeout(e=> {
              this.messages = ''
            },3000)
          }else {
            this.messages = '正在登录。。。'
            var params = {
              userName:this.form.userName,
              password:this.form.password,
            }
            accountLogin(params).then(res=> {
              if(res.code == 200) {
                this.$store.state.headersToken = true
                setToken(res.msg)//储存token
                localStorage.setItem('userInfo', JSON.stringify(res.data))
                this.messages = ''
//                企业用户需要提示
                if(res.data.userType == 0) {
                  this.$emit('close')
                  this.$alert('依据《南京市环境教育促进办法》要求，市环境保护主管部门确定的重点排污单位，其单位负责人和环境保护管理人员应当定期接受由市环境保护主管部门组织的环境教育培训，每年不少于八个学时。因环境违法行为被环境保护主管部门依法实施行政处罚的企业、事业单位，其单位负责人及相关责任人员应当在九十日内，持有效身份证件到指定地点或者登录市环境保护主管部门设置的远程教育网站，接受不少于十六个学时的环境警示教育培训。', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.$emit('reload')
                    }
                  });
                }else {
                  this.$emit('reload')
                }
              }else {
                this.$store.state.headersToken = true
                this.messages = res.msg
                setTimeout(e=> {
                  this.messages = ''
                },3000)
              }
            }).catch(() => {
              this.$store.state.headersToken = true
              this.messages = '错误，请稍后再试。'
              setTimeout(e=> {
                this.messages = ''
              },3000)
            })
          }
      },
//      手机验证码登录
      onSubmit1() {
        if(this.form.tel==''){
          this.messages = '请输入手机号'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        }else if(this.form.code==''){
          this.messages = '请输入验证码'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        }else {
          this.$store.state.headersToken = false
          var params = {
            phone:this.form.tel,
            code:this.form.code,
          }
          telLogin(params).then(res=> {
            this.$store.state.headersToken = true
            if(res.code == 200) {
              setToken(res.msg)//储存token
              localStorage.setItem('userInfo', JSON.stringify(res.data))
              this.messages = ''
//                企业用户需要提示
              if(res.data.userType == 0) {
                this.$alert('依据《南京市环境教育促进办法》要求，市环境保护主管部门确定的重点排污单位，其单位负责人和环境保护管理人员应当定期接受由市环境保护主管部门组织的环境教育培训，每年不少于八个学时。因环境违法行为被环境保护主管部门依法实施行政处罚的企业、事业单位，其单位负责人及相关责任人员应当在九十日内，持有效身份证件到指定地点或者登录市环境保护主管部门设置的远程教育网站，接受不少于十六个学时的环境警示教育培训。', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.$emit('reload')
                  }
                });
              }else {
                this.$emit('reload')
              }
            }else {
              this.messages = res.msg
              setTimeout(e=> {
                this.messages = ''
              },3000)
            }
          }).catch(() => {
            this.$store.state.headersToken = true
            this.messages = '错误，请稍后再试。'
            setTimeout(e=> {
              this.messages = ''
            },3000)
          })
        }
//        this.$emit('close')
//        this.$alert('依据《南京市环境教育促进办法》要求，市环境保护主管部门确定的重点排污单位，其单位负责人和环境保护管理人员应当定期接受由市环境保护主管部门组织的环境教育培训，每年不少于八个学时。因环境违法行为被环境保护主管部门依法实施行政处罚的企业、事业单位，其单位负责人及相关责任人员应当在九十日内，持有效身份证件到指定地点或者登录市环境保护主管部门设置的远程教育网站，接受不少于十六个学时的环境警示教育培训。', '提示', {
//          confirmButtonText: '确定',
//          callback: action => {
//            localStorage.setItem('isLogin',1)
//            this.$emit('reload')
//          }
//        });
      },
//      企业员工注册
      onSubmit2() {
       if(this.form.password==''){
         this.messages = '请输入密码'
         setTimeout(e=> {
           this.messages = ''
         },3000)
        }else if(this.form.password!=this.form.passAgain){
         this.messages = '两次输入的密码不同'
         setTimeout(e=> {
           this.messages = ''
         },3000)
        }else if(this.form.userName==''){
         this.messages = '请输入昵称'
         setTimeout(e=> {
           this.messages = ''
         },3000)
        }else if(this.form.nickname==''){
         this.messages = '请输入姓名'
         setTimeout(e=> {
           this.messages = ''
         },3000)
        }else if(this.form.tel==''){
         this.messages = '请输入手机号码'
         setTimeout(e=> {
           this.messages = ''
         },3000)
        }else if(this.form.idCard==''){
         this.messages = '请输入身份证号码'
         setTimeout(e=> {
           this.messages = ''
         },3000)
        }else {
         this.$store.state.headersToken = false
          const loading = this.openLoading();
            var params = {
              password: this.form.password,
              job: this.form.job,
              nickname:this.form.nickname,
              userName: this.form.userName,
              idCard: this.form.idCard,
              tel: this.form.tel,
              companyId: this.form.companyId,
              wechat: this.form.wechat,
            }
          register(params).then(res=> {
            this.$store.state.headersToken = true
            loading.close();
            if(res.code == 200) {
              this.onSubmit()
            }else {
              this.messages = res.msg
              setTimeout(e=> {
                this.messages = ''
              },3000)
            }
          }).catch(() => {
            this.$store.state.headersToken = true
            loading.close();
          })
        }
      },
      //      手机号注册
      onSubmit3() {
        if(this.form.code==''){
          this.messages = '请输入密码'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        }else if(this.form.userName==''){
          this.messages = '请输入昵称'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        }else if(this.form.nickname==''){
          this.messages = '请输入姓名'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        }else if(this.form.tel==''){
          this.messages = '请输入手机号码'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        }else if(this.form.code==''){
          this.messages = '请输入验证码'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        }else if(this.form.idCard==''){
          this.messages = '请输入身份证号码'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        }else {
          this.$store.state.headersToken =false
          var params = {
            code: this.form.code,
//            job: this.form.job,
            nickname:this.form.nickname,
            userName: this.form.userName,
            idCard: this.form.idCard,
            tel: this.form.tel,
//            companyId: this.form.companyId,
            wechat: this.form.wechat,
          }
          registerByTel(params).then(res=> {
            this.$store.state.headersToken = true
            if(res.code == 200) {
              this.userName = res.data.userName
              this.onSubmit()
            }else {
              this.messages = res.msg
              setTimeout(e=> {
                this.messages = ''
              },3000)
            }
          }).catch(() => {
            this.$store.state.headersToken = true
            this.messages = '错误'
            setTimeout(e=> {
              this.messages = ''
            },3000)
          })
        }
      },
      //        验证码倒计时
      startCountDown() {
        this.timeController = setInterval(() => {
          if (this.time > 0) {
            this.time--;
          } else {
            this.time = 60;
            this.codeSend = false;
            clearInterval(this.timeController);
          }
        }, 1000);
      },
      //获取验证码
      getCode() {
        this.$store.state.headersToken = false
        var params = {phone:this.form.tel}
        sendcode(params).then(res=> {
          this.$store.state.headersToken = true
          if(res.code==200) {
            this.messages = res.msg
            setTimeout(e=> {
              this.messages = ''
            },3000)
            this.codeSend = true;
            this.startCountDown();
          }else {
            this.messages = res.msg
            setTimeout(e=> {
              this.messages = ''
            },3000)
          }
        }).catch(() => {
          this.$store.state.headersToken = true
          this.messages = '错误'
          setTimeout(e=> {
            this.messages = ''
          },3000)
        })
      },
    }
  }
</script>

<style scoped>
  #login {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #333333bf;
    top: 0;
  }
  .login-box {
    background: #fff;
    width: 500px;
    height: auto;
    border-radius: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
  }
  .loginBox {
    box-sizing: border-box;
    font-size: 0;
    padding: 20px 10px;
  }
  /deep/
  .el-input {
    margin-bottom: 30px;
  }
  /*/deep/*/
  /*.el-menu-demo{*/
    /*padding: 0 25px;*/
  /*}*/
  /deep/
  .el-menu-item {
    font-size: 16px;
  }
  .el-icon-close{
    font-size: 35px;
    margin-top: 10px;
    margin-left: 40px;
    font-weight: 700;
  }
  /deep/ .el-menu--horizontal>.el-menu-item.is-active {
           border-color: #22944E;
         }
  /deep/ .el-button {
    background: #22944E;
           border-color: #22944E;
  }
  /deep/ .select-popper {
         z-index: 9999!important;
           top: auto !important;
           left: auto !important;
         }
  /deep/ .select-popper .el-select-dropdown__item:hover {
           background-color: rgba(159,207,255);
    color: #fff;
         }
  /deep/ .el-select .el-input {
           margin-bottom: 0;
         }

</style>
<style>
  /deep/.el-message, .el-message--warning {
    z-index:9999!important;
  }
</style>
